<template>
  <div class="admin-dashboard">
    <el-container class="admin-container">
      <el-aside width="220px" class="admin-sidebar">
        <div class="admin-header">
          <h2>管理后台</h2>
        </div>
        <el-menu
          router
          :default-active="$route.path"
          class="admin-menu"
        >
          <el-menu-item index="/admin/users">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/reset-password">
            <i class="el-icon-key"></i>
            <span>密码重置</span>
          </el-menu-item>
          <el-menu-item index="/admin/announcements">
            <i class="el-icon-bell"></i>
            <span>公告管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/questions">
            <i class="el-icon-question"></i>
            <span>试题管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header class="admin-content-header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="{ path: item.path }">
              {{ getDisplayName(item.name) }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="admin-user">
            <el-avatar :size="32" :src="userAvatarUrl"></el-avatar>
            <span>{{ userInfo.username }}</span>
          </div>
        </el-header>
        
        <el-main class="admin-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import config from '../../config'

export default {
  name: 'AdminDashboard',
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const userInfo = computed(() => store.getters.getUserInfo)
    
    // 计算属性：确保用户头像路径完整
    const userAvatarUrl = computed(() => {
      return config.getFullResourceUrl(userInfo.value.avatarUrl);
    });
    
    // 获取面包屑数据
    const getBreadcrumb = () => {
      const pathArray = route.path.split('/').filter(Boolean)
      const breadcrumbs = []
      
      let path = ''
      for (const segment of pathArray) {
        path += `/${segment}`
        const name = segment.charAt(0).toUpperCase() + segment.slice(1)
        breadcrumbs.push({ path, name })
      }
      
      return breadcrumbs
    }
    
    const breadcrumbs = computed(() => getBreadcrumb())
    
    // 获取面包屑显示名称
    const getDisplayName = (name) => {
      if (name === 'Admin') return '管理后台'
      if (name === 'Users') return '用户管理'
      if (name === 'Reset-password') return '密码重置'
      if (name === 'Announcements') return '公告管理'
      if (name === 'Questions') return '试题管理'
      return name
    }
    
    onMounted(() => {
      // 确保用户有管理员权限
      if (!store.getters.isAdmin) {
        router.push('/')
      }
    })
    
    return {
      userInfo,
      userAvatarUrl,
      breadcrumbs,
      getDisplayName
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  height: calc(100vh - 60px);
}

.admin-container {
  height: 100%;
}

.admin-sidebar {
  background-color: #304156;
  color: #fff;
  height: 100%;
}

.admin-header {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #1f2d3d;
}

.admin-header h2 {
  color: #fff;
  font-size: 18px;
  margin: 0;
}

.admin-menu {
  border-right: none;
  background-color: #304156;
}

.admin-menu :deep(.el-menu-item) {
  color: #bfcbd9;
}

.admin-menu :deep(.el-menu-item.is-active) {
  color: #409EFF;
  background-color: #263445;
}

.admin-menu :deep(.el-menu-item:hover) {
  background-color: #263445;
}

.admin-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  height: 50px;
  padding: 0 20px;
}

.admin-user {
  display: flex;
  align-items: center;
}

.admin-user span {
  margin-left: 8px;
  font-size: 14px;
}

.admin-content {
  background-color: #f0f2f5;
  height: calc(100vh - 110px);
  overflow-y: auto;
}

:deep(.el-breadcrumb__inner a) {
  color: #606266;
  font-weight: normal;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #303133;
  font-weight: bold;
}
</style> 